<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <script type="text/javascript">
        window.onload=function () {
                document.addEventListener('touchstart',function (event) {
                    if(event.touches.length>1){
                        event.preventDefault();
                    }
                })
                var lastTouchEnd=0;
                document.addEventListener('touchend',function (event) {
                    var now=(new Date()).getTime();
                    if(now-lastTouchEnd<=300){
                        event.preventDefault();
                    }
                    lastTouchEnd=now;
                },false)
            }
    </script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./css/style.min.css">
    <title>领取优惠券</title>
</head>

<body class="cmc-body">
    <div id="personal_center">
        <div class="t-container">
            <header class="cl" v-show="header.show">
                <div class="nav-bar cl">
                    <span class="goback arrow_l" @click="goback"></span>
                    <span class="page-name" v-cloak>领券中心</span>
                </div>
            </header>
            <div v-html="html">

            </div>
            <div class="t-main">
                <div class="t-order-tab">
                    <div class="t-order-tab-ul">
                        <div class="tab-slide ccc-tab-slide" v-for="(item,$index) in tabs">
                            <a href="javascript:void(0);" @click="choose($index,item.status);" :class="{'t-order-tab-ul-li':$index===selected}">
                                <span class="tabs-span" v-cloak>{{item.tabName}}<i class="t-corner" v-show="item.leng > 0">{{item.leng}}</i></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="t-whole-main"  v-cloak>
                    <div class="t-whole-goods-item t-cmc-goods-item" v-for="(item,$index) in list">
                            <div class="t-gap-box"></div>
                            <div class="t-whole-content t-cc-center-content">
                                <div class="t-box-flex t-ccc-box">
                                    <h3 :class="{'t-cash-title':item.type == 1}" class="t-cash-title" v-if="item.couponType==0">{{item.amount}}元活动券<span class="t-ss-small" v-if="item.type == 1" >（满{{item.conditionAmount}}可用）</span></h3>
                                    <h3  class="t-cmc-title" v-if="item.couponType==1">{{item.amount}}元现金券</h3>

                                    <p>
                                        <span v-cloak style="color: #101010">{{item.subTitle}}</span>
                                    </p>
                                    <p>
                                        <span v-cloak>{{item.startTime.substring(0,16)}}至{{item.endTime.substring(0,16)}}</span>
                                    </p>
                                </div>
                                <div class=" t-cc-box-right" :class="[{' t-box-right-cash':item.type == 1&&item.couponType!==1},{' t-box-right-cash':item.type == 2},{'t-already-receive-right':item.takeCount == item.maxTime},{'t-have-finished-right':item.haveFinished},{'t-cc-box-right':item.couponType==1}]">
                                    <i v-if="item.takeCount == item.maxTime"></i>
                                    <p v-if="item.takeCount != item.maxTime">￥<span class="t-ss-big" >{{item.amount}}</span></p>
                                    <p ></p>
                                    
                                   <button :class="[{'t-cash-btn':item.type == 2},{'t-cash-btn':item.type == 1},{'t-self-support-btn':item.type == 11}]"  v-if="item.takeCount < item.maxTime" @click="receive($index,item.id)">立即领取</button>
                                   <!-- <button class="t-yellow-btn" v-if="item.type == 1 && item.takeCount < item.maxTime">立即领取</button> -->
                                   <a :href="'coupon-goods-list.html?storeid='+ store_id + '&sType=' + item.sType + '&gType='+ item.gType + '&Gdata=' + item.gData" class="t-already-receive-btn" v-if="item.takeCount == item.maxTime">立即使用</a>
                                   <!-- <button class="t-have-finished-btn" disabled="disabled" v-if="item.haveFinished">今日已领完</button> -->
                                   <div class="t-yellow-right-order" v-if="item.type == 1"></div>
                                   <div class="t-red-right-order" v-if="item.type == 2"></div>
                                </div>
                            </div>
                    </div>

                </div>
                <p class="loading-tip" v-cloak>{{loading_tip}}</p>
            </div>
        </div>
        <div class="t-footer">
            <ul class="t-ul-box counts-ul-box">
            <li><a :href="'home.html?storeid='+store_id" class="t-home"><i class=""></i>首页</a></li>
                <li><a :href="'category.html?storeid='+store_id" class="t-classification"><i class=""></i>分类</a></li>
                <li><a href="c-call-center.html" class="t-coupon-select">
                    <!-- <span class="counts" v-cloak >{{cart_counts}}</span> -->
                    <i class=""></i>优惠券</a>
                </li>
                <li><a :href="'cart.html?storeid='+store_id+'&version='+version" class="t-shopping-cat"><span class="counts" v-cloak ><!-- {{cart_counts}} --></span><i class=""></i>购物车</a></li>
                <li><a :href="'personal-center.html?storeid='+store_id" class="t-my"><i class=""></i>我的</a></li>
            </ul>
        </div>
        <confirm ref="confirm"></confirm>
        <toast ref="toast" style="z-index: 20001;"></toast>
        <alerts ref="alerts"></alerts>
    </div>
    <script src="./js/lib/vue.js"></script>
    <script src="http://static.jdhui.com/lib/vue-resource/1.2/vue-resource.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script src="./js/min/common.min.js"></script>
    <script src="./js/min/component.min.js"></script>

    <script>
        var toast = component.popup.toast(),
            confirm = component.popup.confirm({
                name: 'confirm',
                type: 'confirm'
            }),
            alerts = component.popup.confirm({
                name: 'alert',
                type: 'alert'
            });
        var app = new Vue({
            el: '#personal_center',
            data: function() {
                return {
                    header: {
                        show: !APP.iswechat()
                    },
                    list: [],
                    status: APP.getQueryString('status') || '',
                    isloading: false,
                    page: 0,
                    loading_tip: '数据加载中',
                    store_id: APP.getQueryString('storeid'),
                    version:APP.version,
                    html: '',

                    tabs: [{
                        tabName: '默认',
                        status:'10',
                        leng: 0
                    }, {
                        tabName: '普通优惠券',
                        status:'20',
                        leng: 0
                    }, {
                        tabName: '满减优惠券',
                        status:'30',
                        leng: 0
                    },{
                        tabName: '现金优惠券',
                        status:'40',
                        leng: 0
                    }],
                    selected: APP.getQueryString('status') == '10' ? 0 : (APP.getQueryString('status') == '20' ? 1 : (APP.getQueryString('status') == '30' ? 2 : (APP.getQueryString('status') == '40' ? 3 : 0)) ),
                    keyword: '',
                    startTime: '',
                    endTime: '',
                    shop_name: '',
                    member_id: '',
                    member_name:'',
                    mobile:'',
                }
            },
            mounted: function() {
                APP.init(this, function() {
                    this.shop_name = APP.getCookie('shopname');
                    this.member_id = APP.getCookie('memberid');
                    console.log(1);
                }.bind(this), function(arg) {
                    this.shop_name = arg.body.data.shop.shop_name;
                    this.member_id = arg.body.data.member.member_id;
                    console.log(2);
                }.bind(this));
                this.getData();
                window.addEventListener('scroll', this.scrollLoading);

                //获取会员店名和电话
                Vue.http.get(APIPHP + 'index.php?r=member/u/index&storeid=' + this.store_id).then(function(_res){
                    console.log(_res);
                    if(_res.body.error_code == 200){
                        this.member_name = _res.body.data.member_name;
                        this.mobile = _res.body.data.mobile;
                    }
                }.bind(this),function(){
                    console.log('err');
                })
            },
            destroyed: function() {
                window.removeEventListener('scroll', this.scrollLoading);
            },
            components: {
                'toast': toast,
                'confirm': confirm,
                'alerts': alerts
            },
            methods: {
                goback: function() {
                    //window.history.go(-1);
                    window.location.href = 'personal-center.html?storeid=' + this.store_id;
                },
                getData: function() {
                    this.page++;
                    this.isloading = true;
                    var _url = YHQJAVA + 'wap/receive/receiveCoupon';
                    //获取优惠券列表
                     if(this.selected == 0 || this.selected == 1 || this.selected == 2 || this.selected == 3){
                        Vue.http.post(_url,{
                            type:this.selected == 0 ? '' : this.selected == 1 ? 2 : this.selected == 2 ? 1  : this.selected == 3 ? 11 : '' ,
                            pageIndex:this.page,
                            pageSize:10,
                            memberId:1,
                            shopId:this.store_id
                        },{
                            emulateJSON: true
                        }).then(function(_res){
                            console.log(_res.body);
                            this.isloading = false;
                            var _data = _res.body;
                            if(_data.code == 1){
                                this.list = this.list.concat(_data.obj.list);
                                // _data.obj.list.forEach(function(v,k){
                                //     this.couponId = v.id;
                                //     console.log(k);
                                // }.bind(this));
                                if(_data.obj.list.length < 10){
                                    this.loading_tip = '没有更多数据';
                                    setTimeout(function() {
                                        window.removeEventListener('scroll', this.scrollLoading);
                                    }.bind(this), 100);
                                }else{
                                    this.loading_tip = '加载更多数据';
                                } 
                            }
                       }.bind(this),function(err){
                            this.isloading = false;
                       }.bind(this))
                    }

                    
                },
                scrollLoading: function() {
                    if (this.isloading) return;
                    if (document.body.scrollHeight - document.body.scrollTop - window.innerHeight < 150) {
                        this.getData();
                    }
                },
                choose: function(index, s) {

                    this.selected = index;
                    window.location.href = "c-call-center.html?storeid=" + this.store_id + '&status=' + s;
                },
                receive:function(index,id){
                    Vue.http.post(YHQJAVA + 'wap/receive/accept',{
                        memberId:this.member_id,
                        couponId:id,
                        shopId:this.store_id,
                        memberName:this.member_name,
                        mobile:this.mobile
                    },{
                       emulateJSON: true 
                   }).then(function(_res){
                        var _data = _res.body;
                        if(_data.code == 1){
                            this.$refs.toast.show(_data.message);
                            setTimeout(function(){
                                window.location.href = "c-call-center.html?storeid=" + this.store_id + '&status=' + this.status;
                            }.bind(this),1000)
                        }else{
                            this.$refs.toast.show(_data.message);
                        }
                        console.log(_data);
                   }.bind(this),function(err){

                   }.bind(this))
                }

            }
        })
    </script>
</body>

</html>